<template>
	<view class="all">
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
		<!-- 顶部导航 开始 -->
		<uni-nav-bar left-icon="back" title="文章列表" backgroundColor="#EE515A" color="#ffffff" @clickLeft="handleBack"></uni-nav-bar>
		<!-- 顶部导航 结束 -->
		
		<!-- 内容开始  -->
		<view class='dynamicBox bg_FFFFFF'>
			<!-- 动态开始 -->
			<view class="dynamicList bg_FFFFFF border-bottom-1B202C" v-for="(item,index) in list" :key="index">
				<view class="newsBox flex justify-between" @click="details(item.id)">
					<image class="newsImg" :src="item.thumb_url|| '/static/thumb.jpg'"></image>
					<view class="flex justify-between newsInfo flex-direction flex-sub margin-left-sm">
						<view class="fo30_w500 flex-te2 text-black text-lg text-cut2">{{item.title.substr(0,13)}}...</view>
						<view class="flex-te2 text-black text-sm">{{item.brief.substr(0,26)}}...</view>
						<view class="flex align-center">
							<text class="margin-right-sm color_B6B6B6 text-sm">{{typeText}}</text>
							<text class="margin-right-sm color_B6B6B6 text-sm">{{item.atime}} </text>
						</view>
					</view>
				</view>
			</view>
			<!-- 动态结束 -->
		</view>
		<!-- 内容结束  -->

		</mescroll-body>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"; // 上下拉加载刷新
	export default {
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight,//状态栏高度
				typeText: '市场要闻',
				type:1,
				page:2,
				list:[],
				// 是否自动加载
				downOption: {
					auto: false //是否在初始化后,自动执行downCallback; 默认true
				},
			};
		},
		methods:{
			//返回上一页
			handleBack(){
				uni.navigateBack({
				    delta: 1
				});
			},
			/*下拉刷新的回调 */
			downCallback() {
				let data = {
					type:this.type,
				}
				console.log("downCallback")
				this.$Request.post(this.$api.index.arcticle,data).then(res => {
					//联网成功的回调,隐藏下拉刷新的状态
					this.mescroll.endSuccess();
					//设置列表数据
					// this.list.unshift(res.data);
					this.list = res.data
				}).catch(() => {
					//联网失败的回调,隐藏下拉刷新的状态
					this.mescroll.endErr();
				})
			
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback() {
				console.log("upCallback")
				let data = {
					type:this.type,
					page:this.page
				}
				this.page = this.page + 1
				// //联网加载数据
				this.$Request.post(this.$api.index.arcticle,data).then(res => {
					let hasNext = false
					if(res.data.length>0){
						hasNext = true
					}
					this.mescroll.endSuccess(res.data.length,hasNext);
					//设置列表数据
					this.list = this.list.concat(res.data);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//公告列表
			arcticle: function() {
				let data = {
					type:this.type
				}
				this.$Request.post(this.$api.index.arcticle,data).then(res => {
					this.list =res.data;
			 	})
			},
			//查看详情
			details:function(id){
				uni.navigateTo({
						url: '/pages/public/arcticle/detail?id='+id
				});
			},
		},
		onLoad(e) {
			if(e.type){
				this.type = e.type
			}
			if(e.type == 1){
				this.typeText = "市场要闻"
			}else{
				this.typeText = "公司资讯"
			}
			this.arcticle();
		}
	}
</script>

<style lang="scss" scoped>
	.dynamicList{
		padding: 15px;
	}
	.newsImg{
		width: 120px;
		height: 78px;
		border-radius: 5px;
		overflow: hidden;
	}
	.dynamicTab{
		padding: 20px 22px 10px;
		border-bottom: 1px solid #090C12;
		.tabItem{
			font-size: 14px;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 18px;
			margin-right: 50px;
			transition: 0.2s all;
			&.active{
				color: #4375E4;
				position: relative;
				font-size: 17px;
				&:after{
					position: absolute;
					content: '';
					bottom: -10px;
					left: 50%;
					margin-left: -8px;
					width: 16px;
					height: 3px;
					background: #4375E4;
					border-radius: 2px;
				
				}
			}
			
		}
	}

</style>
<style scoped>
	.border-bottom-1B202C{
		border-color: #DDDDDD;
	}
</style>
